<template>
	<view class="pt30">
		<view class="money">
			<view class="dflex alc jcsb">
				<view class="white">
					<view class="fs28  pl30">累计到账收益(元)</view>
					<view :style="styleObj" class="fw700 mt10">
						<!-- ￥{{ Number(userInfo.money) > 0 ? userInfo.money+'元' : 0 }} -->

						{{ money }}
					</view>
				</view>
				<image src="../../static/logoimg.png" mode=""></image>
			</view>
		</view>
		<view class="ml30 mt40 dflex alc">
			<view class="details"></view>
			<view class="fs32 color ml20">收益详情列表</view>
		</view>
		<view class="dflex w750 auto mt36">
			<view class="flex1 textc">收益周期</view>
			<view class="flex1 textc">兑付时间</view>
			<view class="flex1 textc">收益金额</view>
		</view>
		<view class="dflex w750 auto mt30 mb30" v-for="(item, index) in list" :key="index">
			<view class="flex1 textc">{{ item.title }}</view>
			<view class="flex1 textc">{{ item.settlement_time }}</view>
			<view class="flex1 textc">{{ item.settlement_amount }}</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, onMounted } from 'vue';
import { getOrderDetails } from '@/utils/api.js';
// let userInfo = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : '';
// let money =
// 	Number(userInfo.money) > 0
// 		? '￥' + Number(userInfo.money).toFixed(2) + '元'
// 		: '￥' + Number(0).toFixed(2) + '元';
let money = ref();
let styleObj = ref({});
console.log(money, '54');
let id = ref('');
let list = ref([]);
let getData = () => {
	getOrderDetails({ order_id: id.value }).then(res => {


		money.value =
			Number(res.data.user_money) > 0
				? '￥' + (Number(res.data.user_money)).toFixed(2)+'元' 
				: '￥' + Number(0).toFixed(2) + '元';

		list.value = res.data.zqlist;
		styleObj.value = money.value.length > 10 ? { fontSize: '40rpx' } : { fontSize: '56rpx' };
	});
};
onLoad(options => {
	id.value = options.id;
	getData();
});
onMounted(() => {
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
});
</script>

<style lang="scss" scoped>
.money {
	width: 690rpx;
	height: 220rpx;
	background: linear-gradient(180deg, #f65249 0%, #e1251b 100%);
	border-radius: 10rpx;
	margin: 0 auto;
	image {
		width: 300rpx;
		height: 220rpx;
	}
}
.details {
	width: 8rpx;
	height: 28rpx;
	background: linear-gradient(180deg, #f65249 0%, #e1251b 100%);
	border-radius: 10rpx;
}
</style>
